<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/api.css">
  <title>设备信息</title>
  <style> 
    #dataList li{
      padding:12px 10px;
      border-bottom: 1px solid #cccccc;
      list-style: none;
    }
    #disBtn {
      position: fixed;
      bottom:5px;
      right:5px;
      border-radius: 50%;
      height:50px;
      width:50px;
      background: blue;
    }
  </style>
</head>

<body>
  <button id="disBtn">关闭</button>
  <ul id="dataList">

  </ul>
</body>

<script type="text/javascript" src="../script/underscore-min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script>
  apiready = function () {
    var ble = api.require('ble');
    
    ble.discoverService({
      peripheralUUID: api.pageParam.peripheralUUID
    }, function (ret) {
      if (ret) {
        //api.alert({ msg: JSON.stringify(ret) });
        var serviceUUID = _.last(ret.services);
        
        ble.discoverCharacteristics({
          serviceUUID: serviceUUID,
          peripheralUUID: api.pageParam.peripheralUUID
        }, function (ret) {
          if (ret) {
            //api.alert({ msg: JSON.stringify(ret) });
            var characteristicUUID = ret.characteristics[0].uuid;
            ble.setNotify({
              peripheralUUID: api.pageParam.peripheralUUID,
              serviceUUID: serviceUUID,
              characteristicUUID: characteristicUUID
            }, function (ret, err) {
              if (ret.status) {
                $api.append($api.byId('dataList'), '<li>' + getHtml(ret.characteristic.value) + '</li>');
              } else {
                api.toast({ msg: err.code })
              }
            });
          }
        });

      }
    });

    document.querySelector('#disBtn').addEventListener('click', function(){
      ble.disconnect({
          peripheralUUID: api.pageParam.peripheralUUID
      }, function(ret, err) {
          if (ret.status) {
            api.openFrame({
              name: 'main',
              url: './main.html',
              bounces: true,
              animation:{
                type:"push",                //动画类型（详见动画类型常量）
                subType:"from_left",       //动画子类型（详见动画子类型常量）
                duration:300       
              }
            });
          }
      });
    });
  }
  function parseInfo(data){
      var retObj = {
        EQ: parseInt(data.slice(4,6), 16),
        TMP: parseInt(data.slice(6,8), 16),
        OM: parseInt(data.slice(8,10), 16).toString(2),
        ERR: parseInt(data.slice(10,12), 16).toString(2)
      };

      return retObj;
    }

    function getHtml(data) {
      var info = parseInfo(data);
      var retStr = '电池电量：'+ info.EQ +'</br>'+
      '电池温度：'+ info.TMP +'</br>'+
      '工作状态：'+ info.OM +'</br>'+
      '异常状态：'+ info.ERR +'</br>'+
      '<span style="font-size:10px; color:#cecece">'+data+'</span>';

      return retStr;
    }
</script>

</html>